<template>
  <div class="login">
    <div class="desc">
      <img width="100%" height="100%" src="../../assets/image/cargo/logo.png">
    </div>
    <div class="login-wrapper">
      <div class="form-wrapper">
        <div class="username">
          <el-input
            v-model="loginForm.username"
            prefixIcon="fa fa-user-circle"
            size="medium"
            placeholder="用户名">
          </el-input>
        </div>
        <div class="password">
          <el-input
            v-model="loginForm.password"
            prefixIcon="fa fa-key"
            size="medium"
            type="password"
            placeholder="密码">
          </el-input>
        </div>
        <div class="remember">
          <el-checkbox
            v-model="loginForm['remember-me']"
          ></el-checkbox>
          记住密码
        </div>
        <div class="login-btn">
          <el-button size="medium" type="primary" @click="login" :loading="loading" plain>登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import loginApi from 'api/login'
  import {mapMutations} from 'vuex'

  export default {
    data() {
      return {
        loading: false,
        loginForm: {}
      }
    },
    methods: {
      login() {
        this.loading = true
        loginApi.login(this.loginForm).then(response => {
          let keys = response.keys;
          window.localStorage.setItem('keys', JSON.stringify(keys))
          this.setKeys(keys)
          this.$router.push('/')
          this.loading = false
        })
      },
      ...mapMutations({
        setKeys: 'SET_KEYS'
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .login
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    background-image url("../../assets/image/cargo/登录.jpg")
    background-repeat no-repeat
    background-size 100% 100%
    .desc
      position absolute
      top 250px
      left 200px
      width 392px
      height 263px
    .login-wrapper
      position absolute
      width 100%
      bottom 0
      height 150px
      background rgba(0, 0, 0, .5)
      .form-wrapper
        position absolute
        display flex
        justify-content center
        align-items center
        top 50%
        left 50%
        transform translate(-50%, -50%)
        width 50%
        margin auto
        font-size 0
        .username
          display inline-block
          padding-right 20px
          width 35%
          box-sizing border-box
        .password
          display inline-block
          padding-right 20px
          width 35%
          box-sizing border-box
        .remember
          display inline-block
          width 5%
          color #fff
          box-sizing border-box
          text-align center
          white-space nowrap
        .login-btn
          position relative
          height 100%
          display inline-block
          width 25%
          text-align center
          box-sizing border-box
</style>
